<template>
  <div class="common-table">
    <el-table :data="tableData" stripe border>
      <!-- 动态渲染列 -->
      <el-table-column
          v-for="(field, index) in fields"
          :key="index"
          :prop="field.prop"
          :label="field.label"
          :width="field.width"
      >
        <template v-slot="scope">
          <!-- 检查是否需要自定义渲染 -->
          <slot v-if="$scopedSlots[field.prop]" :name="field.prop" :row="scope.row" :column="scope.column" />
          <span v-else>{{ scope.row[field.prop] }}</span>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column v-if="showActions" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="$emit('edit', scope.row)">编辑</el-button>
          <el-button type="text" @click="$emit('delete', scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    fields: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    showActions: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style scoped>
.common-table {
  padding: 10px;
}
</style>
